<template>
	<view class="bg">
		<view class="container">
			<view :scroll-x="true" class="nav" :scroll-into-view="[4,5,6].includes(id) ? 'item'+ id : 'item1'"
				:scroll-with-animation="true" :enable-passive="true" :enhanced="true">
				<div class="item" :id="'item'+ (index+1)" v-for="(item, index) in list" :key="index"
					:class="{ active: id === item.id }" @click="handleIsUse(item.id)">
					<text>{{ item.vipTypeName }}</text>
					<div class="icon-nav-active">
						<image v-if="id == item.id" class="icon" src="https://xrmwl.com/jyz/icon-nav-active@2x.png"
							mode="aspectFit"></image>
					</div>
				</div>
			</view>

			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :current="swiperIndex" :interval="3000"
				:duration="1000" @change="handelChangeSwiper">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="card" :class="'vip'+item.id">
						<!-- userDetail.vipTypeId -->
						<image class="mine-bg" :src="`https://xrmwl.com/jyz/ship-bg${item.id}@2x.png`" mode="aspectFit">
						</image>
						<div class="card-box">
							<template v-if="item.upgradeStatus === 0">
								<div class="recharge-progress">
									<div class="right">
										<div class="recharge-link">未解锁</div>
									</div>
								</div>
							</template>
							<template v-else-if="item.upgradeStatus === 2">
								<image class="icon-current"
									:src="`../../../static/images/mine/icon-current${item.id}@2x.png`" mode="aspectFit">
								</image>
							</template>
							<template v-else>
								<div class="recharge-progress">
									<div class="right">
										<div class="recharge-link">已解锁</div>
									</div>
								</div>
							</template>
							<div class="card-box-info">
								<div class="vip-type">{{ item.vipTypeName }}</div>

								<div class="recharge-progress">
									<div class="left">
										<div class="recharge">
											<div class="label">已充值：</div>
											<div class="num">{{ item.nowValue }}</div>
											<div class="unit">元</div>
										</div>
										<!-- 进度 -->
										<!-- 根据开关显示隐藏 -->
										<template v-if="item.isShowProgress === 1">
											<div class="progress">
												<div class="progress-box">
													<div class="progress-percent"
														:style="{ width: item.progressRate + '%' }">
													</div>
												</div>
												<div class="progress-value">{{ item.progressRate }}%</div>
											</div>
										</template>
										<!-- 根据开关显示隐藏 -->
										<template v-if="item.isShowProgressDesc === 1">
											<div class="progress-tips" v-if="item.id === 6 && item.upgradeStatus === 2">
												您享受最高最优惠的折扣</div>
											<div class="progress-tips" v-else>
												再充值
												<div class="num">{{ item.gapValue }}元</div>
												即可升为
												<div class="num">{{ item.nextName }}</div>
											</div>
										</template>
									</div>
									<!-- <div class="right" v-if="userDetail.vipTypeId !== 5">
                <div @click="handelToNav('/pages/recharge/index')" class="recharge-link">去充值</div>
              </div> -->
								</div>
							</div>
							<!-- 工具 -->
							<div class="tool" :class="'vip'+item.id">
								<div class="title">会员权益</div>
								<div class="divide">
									<image class="icon-line-active"
										:src="`https://xrmwl.com/jyz/icon-line-active${item.id}@2x.png`" mode="">
									</image>
								</div>
								<div class="tool-box" :class="{ active: item.id }">
									<div class="item" v-if="item.petrolBenefitDescList">
										<div class="label">加油优惠</div>
										<div class="context">
											<view v-for="(val,k) in item.petrolBenefitDescList" :key="k">
												{{val}}
											</view>
										</div>
									</div>
									<div class="item" v-if="item.rechargeBenefitDescList">
										<div class="label">充值优惠</div>
										<div class="context">
											<view v-for="(val,k) in item.rechargeBenefitDescList" :key="k">
												{{val}}
											</view>
										</div>
									</div>
									<div class="item" v-if="item.creditBenefitDescList">
										<div class="label">消费活动</div>
										<div class="context">
											<view v-for="(val,k) in item.creditBenefitDescList" :key="k">
												{{val}}
											</view>
										</div>
									</div>
								</div>
							</div>
						</div>
					</view>
				</swiper-item>

			</swiper>
		</view>


	</view>
	</view>
</template>

<script>
	import {
		memberSearchVipBenefitList,
		memberDetail
	} from '@/api/member.js';
	export default {
		data() {
			return {
				swiperIndex: 0,
				id: 1,
				list: [],
				userDetail: {},
				comDetail: {}
			};
		},
		onShow() {
			this.getMemberDetail()
			this.getMemberSearchVipBenefitList();
		},
		computed: {
			vipType() {
				return 'vip' + this.userDetail.vipTypeId
			}
		},
		methods: {
			getMemberDetail() {
				memberDetail().then(res => {
					this.userDetail = res.data;
					this.id = res.data.vipTypeId
					this.swiperIndex = parseInt(res.data.vipTypeId) - 1
				});
			},
			// 获取权益列表
			getMemberSearchVipBenefitList() {
				memberSearchVipBenefitList().then(res => {
					this.list = res.rows;
					// console.log(res);
				});
			},
			// 根据选择类型处理卡片内容
			handleIsUse(opt) {
				this.id = opt;
				this.swiperIndex = parseInt(opt) - 1
			},
			// 根据swiper滑动选择类型
			handelChangeSwiper(opt) {
				this.id = parseInt(opt.detail.current) + 1
				this.swiperIndex = parseInt(opt.detail.current)
			}
		}
	};
</script>

<style lang="scss">
	.bg {
		min-height: 100vh;
		background: #fff;
	}

	.container {
		padding: 24rpx 0;
		padding-top: 4px;
		line-height: inherit;
		background: linear-gradient(180deg, #1e60ff 0%, rgba(30, 96, 255, 0) 100%);
		background-size: 100% 416rpx;
		background-repeat: no-repeat;
		width: 100%;
		background-attachment: fixed;

		.nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			padding: 0 0;
			width: 750rpx;
			overflow-y: auto;

			.item {
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.5);
				text-align: center;
				transition: .2s;

				text {
					display: inline-block;
					padding: 20rpx 0 0;
					color: rgba(255, 255, 255, 0.5);
				}

				.icon-nav-active {
					margin: 8rpx 0;
					width: 48rpx;
					height: 10rpx;
					transition: .2s;

					.icon {
						display: block;
						margin-top: 4rpx;
						width: 48rpx;
						height: 10rpx;
						transition: .2s;
					}
				}

				&.active {
					font-weight: 600;
					color: #fff;
					transition: .2s;

					text {
						color: #fff;
						transition: .2s;
					}
				}
			}
		}

		.swiper {
			position: relative !important;
			width: 734rpx !important;
			height: 1464rpx !important;
			margin: 27rpx auto 0 !important;
		}

		.card {
			position: relative !important;
			width: 734rpx !important;
			height: 1464rpx !important;

			&.vip2 {
				.card-box {
					.vip-type {
						color: #c17a31;
					}

					.recharge-progress {
						.left {
							.recharge {
								color: #c17a31;
							}

							.progress .progress-box {
								background: #cf8a43;
								box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(180, 111, 4, 0.5);
							}

							.progress .progress-box .progress-percent {
								background: linear-gradient(90deg, #ffdfbf 0%, #ffffff 100%);
								box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
							}

							.progress .progress-value {
								color: #c17a31;
							}

							.progress-tips {
								color: #c17a31;

								.num {
									color: #ffed82;
								}
							}
						}

						.right .recharge-link {
							background: linear-gradient(72deg, #ffe1b0 0%, #ffa217 100%);
							border: 2rpx solid linear-gradient(75deg, #fdc851, #ffa03f) 2 2;
							// border-image: linear-gradient(75deg, rgba(253, 200, 81, 1), rgba(255, 160, 63, 1)) 2 2;
						}
					}

					.tool {
						.title {
							color: #C17A31;
						}

						.tool-box .item .label {
							color: #C17A31;
							background: linear-gradient(to right, rgba(255, 206, 155, 0.5), rgba(235, 166, 95, 0.5));
						}
					}
				}
			}

			&.vip3 {
				.card-box {
					.vip-type {
						color: #59719c;
					}

					.recharge-progress {
						.left {
							.recharge {
								color: #59719c;
							}

							.progress .progress-box {
								background: #95a6c5;
								box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(89, 113, 156, 0.5);
							}

							.progress .progress-box .progress-percent {
								background: linear-gradient(90deg, #b2fcff 0%, #ffffff 100%);
								box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
							}

							.progress .progress-value {
								color: #59719c;
							}

							.progress-tips {
								color: #59719c;

								.num {
									color: #e0feff;
								}
							}
						}

						.right .recharge-link {
							background: linear-gradient(146deg, #b3d5fe 0%, #6888c6 100%);
							border: 2rpx solid linear-gradient(126deg, rgba(193, 207, 235, 1), rgba(115, 138, 171, 1)) 2 2;
						}
					}

					.tool {
						.title {
							color: #59719C;
						}

						.tool-box .item .label {
							color: #59719C;
							background: linear-gradient(to right, rgba(217, 228, 241, 0.5), rgba(198, 210, 233, 0.5));
						}
					}
				}
			}

			&.vip4 {
				.card-box {
					.vip-type {
						color: #d1840b;
					}

					.recharge-progress {
						.left {
							.recharge {
								color: #d1840b;
							}

							.progress .progress-box {
								background: #d1840b;
								box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(209, 133, 11, 0.5);
							}

							.progress .progress-box .progress-percent {
								background: linear-gradient(90deg, #fffcb9 0%, #ffffff 100%);
								box-shadow: 4px 0px 6px 0px rgba(255, 255, 255, 0.5);
							}

							.progress .progress-value {
								color: #d1840b;
							}

							.progress-tips {
								color: #d1840b;

								.num {
									color: #ffef0f;
								}
							}
						}

						.right .recharge-link {
							background: linear-gradient(146deg, rgba(239, 218, 175, 1.0) 0%, rgba(230, 192, 109, 1.0) 100%);
							border: 2rpx solid linear-gradient(126deg, rgba(255, 233, 187, 1), rgba(255, 213, 121, 1)) 2 2;
						}
					}

					.tool {
						.title {
							color: #D1840B;
						}

						.tool-box .item .label {
							color: #D1840B;
							background: linear-gradient(to right, rgba(255, 233, 187, 0.5), rgba(255, 213, 121, 0.5));
						}
					}
				}
			}

			&.vip5 {
				.card-box {
					.vip-type {
						color: #1E60FF;
					}

					.recharge-progress {
						.left {
							.recharge {
								color: #1E60FF;
							}

							.progress .progress-box {
								background: #B0D8FF;
								box-shadow: inset 0px 2px 6px 0px #7D8FCC;
							}

							.progress .progress-box .progress-percent {
								background: linear-gradient(90deg, #B2FCFF 0%, #FFFFFF 100%);
								box-shadow: 4px 0px 6px 0px rgba(255, 255, 255, 0.5);
							}

							.progress .progress-value {
								color: #1E60FF;
							}

							.progress-tips {
								color: #1E60FF;

								.num {
									color: #6021ff;
								}
							}
						}

						.right .recharge-link {
							background: linear-gradient(146deg, #8FF3FF 0%, #38B9F8 100%);
							border: 2rpx solid linear-gradient(126deg, #8ec9ff, #3650f8) 2 2;
						}
					}

					.tool {
						.title {
							color: #1E60FF;
						}

						.tool-box .item .label {
							color: #1E60FF;
							background: linear-gradient(to right, #8FF3FF, #38B9F8);
						}
					}
				}
			}

			&.vip6 {
				.card-box {
					.vip-type {
						color: #866EDA;
					}

					.recharge-progress {
						.left {
							.recharge {
								color: #866EDA;
							}

							.progress .progress-box {
								background: #B0BFFF;
								box-shadow: inset 0px 2px 6px 0px #7D80CC;
							}

							.progress .progress-box .progress-percent {
								background: linear-gradient(90deg, #C1CCFF 0%, #FFFFFF 100%);
								box-shadow: 4px 0px 6px 0px rgba(255, 255, 255, 0.5);
							}

							.progress .progress-value {
								color: #866EDA;
							}

							.progress-tips {
								color: #866EDA;

								.num {
									color: #f100a5;
								}
							}
						}

						.right .recharge-link {
							background: linear-gradient(146deg, #8fedff 0%, #748eeb 100%);
							border: 2rpx solid linear-gradient(126deg, #8ec9ff, #3650f8) 2 2;
						}
					}

					.tool {
						.title {
							color: #866EDA;
						}

						.tool-box .item .label {
							color: #6363ff;
							background: linear-gradient(to right, #F3F2FF, #CDCDFF);
						}
					}
				}
			}

			.mine-bg {
				display: block;
				width: 734rpx;
				height: 1464rpx;
			}

			.card-box {
				position: absolute;
				// width: 734rpx;
				height: 1464rpx;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				padding: 0 40rpx;
				z-index: 1;

				&-info {
					padding: 0 32rpx;
					height: 216rpx;
				}

				.icon-current {
					width: 168rpx;
					height: 72rpx;
				}

				.vip-type {
					margin-top: 0;
					font-size: 48rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #40729f;
					line-height: 1;
				}

				.recharge-progress {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.left {
						.recharge {
							margin: 44rpx 0 16rpx;
							display: flex;
							align-items: flex-end;
							color: #40729f;

							.label {
								font-size: 24rpx;
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 500;
							}

							.num {
								margin-right: 4rpx;
								font-size: 40rpx;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: bold;
								line-height: 1;
							}

							.unit {
								font-size: 24rpx;
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 500;
							}
						}

						.progress {
							display: flex;
							align-items: center;

							.progress-box {
								position: relative;
								margin-right: 8rpx;
								width: 280rpx;
								height: 20rpx;
								background: #a4c9e8;
								box-shadow: inset 0rpx 2rpx 6rpx 0rpx #7da8cc;
								border-radius: 10rpx;

								.progress-percent {
									height: 20rpx;
									position: absolute;
									top: 0;
									left: 0;
									bottom: 0;
									background: linear-gradient(90deg, #b2fcff 0%, #ffffff 100%);
									box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
									border-radius: 10rpx;
								}
							}

							.progress-value {
								font-size: 24rpx;
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 600;
								color: #59719c;
								line-height: 1;
							}
						}

						.progress-tips {
							display: flex;
							margin-top: 12rpx;
							font-size: 24rpx;
							font-family: PingFang-SC-Medium, PingFang-SC;
							font-weight: 500;
							color: #40729f;

							.num {
								font-weight: 600;
								font-size: 32rpx;
								color: #1e60ff;
								line-height: 1;
							}
						}
					}

					.right {
						margin-right: 18rpx;

						.recharge-link {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: -1rpx;
							width: 170rpx;
							height: 52rpx;
							font-size: 27rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #ffffff;
							background: linear-gradient(72deg, #c0e4ff 0%, #5796cf 100%);
							// border-radius: 40rpx 0rpx 0rpx 40rpx;
							border: 2rpx solid linear-gradient(75deg, #a3c8e9, #82c1fa) 2 2;
							line-height: 1;
							border-radius: 40rpx 7rpx 22rpx 0rpx;
							margin-bottom: 24rpx;
						}
					}
				}

				.tool {
					margin-top: 100rpx;

					.title {
						height: 56rpx;
						font-size: 40rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #40729f;
						text-align: center;
						line-height: 1;
					}

					.divide {
						margin: 0 auto;
						margin-top: 8rpx;
						width: 192rpx;
						height: 4rpx;

						.icon-line-active {
							width: 100%;
							height: 100%;
							display: block;
						}
					}

					.tool-box {
						align-items: flex-start;
						flex-wrap: wrap;
						margin-top: 30rpx;
						flex-direction: column;

						.item {
							margin-bottom: 32rpx;

							.label {
								margin-bottom: 12rpx;
								width: 172rpx;
								height: 56rpx;
								line-height: 56rpx;
								font-size: 28rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #40729F;
								text-align: center;
								border-radius: 32rpx 50rpx 50rpx 0rpx;
								background: linear-gradient(to right, #d2eaff80, #aed4f680);
								overflow: hidden;
							}

							.context {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 48rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
